<template>
<div class="columnManager">
  <div></div>
    <main>
      <!-- 右侧主内容区 -->
      <div class="main-right" >
         <!--搜索框-->
        <el-row>
            <el-button :span="1" class="grid">
              <el-input v-model="searchId" placeholder="请输入栏目" size="mini"></el-input>
            </el-button>
            <el-button :span="1" class="grid">
              <el-button type="success" icon="el-icon-search" size="mini" @click="search()">搜索</el-button>
            </el-button>
            <!--新增按钮-->
            <router-link to="/ui/addColumn">
              <el-button :span="1" class="grid">
                  <el-button type="success" icon="el-icon-plus" size="mini" >新增</el-button>
              </el-button>
            </router-link>

            <!--全删按钮-->
            <el-button :span="1" class="grid">
                <el-button type="danger" icon="el-icon-delete" size="mini" >全删</el-button>
            </el-button>

        </el-row>
        <br>
        <!--表格数据及操作-->
        <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--勾选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--索引-->
            <el-table-column prop="id" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="columnName" label="栏目名称" width="180" sortable>
            </el-table-column>
            <el-table-column prop="columnDesc" label="栏目描述" width="300">
            </el-table-column>
            <el-table-column label="编辑" width="100">
                <template slot-scope="scope">
                    <router-link to="/ui/updateColumn">
                      <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="删除" width="100">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-minus" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>

        <!--分页条-->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </main>
  </div>
</template>

 <script>
 import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'element-ui/lib/index.js'
 Vue.use(Element)
 // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
 //Vue.http.options.root = 'http://120.79.197.130:8080/';

 // 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
 //Vue.http.options.emulateJSON = true;

 export default {
  name: 'columnManager',
  data: function (){
    return {
     active:true,
     searchId: '',
     //表格数据
     tableData: []
    }
  },
  watch:{

  },
  methods:{
    search(){
      this.tableData.forEach((item) => {
          if(this.searchId === item.columnName){
            this.tableData = []
            this.tableData.push(item)
          }

       })

     },
     getAllList(){
      var result = {
           "success": true,
           "errorCode": 0,
           "payload": [
               {
                   "id": 1,
                   "columnName": "中央远教",
                   "columnDesc": "中央远教"
               },
               {
                   "id": 2,
                   "columnName": "达川远教",
                   "columnDesc": "达川远教"
               }
           ]
       }
       console.log(result.payload)
       var data = [];
       result.payload.forEach((item) => {
          data.push(item)
       })
       this.tableData = data;
    }
  },
  created() {
    // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
    this.getAllList()
  },
  mounted() {

  },
  render:{
  }
 }
 </script>

 <style>
     #columnManager {
         font-family: Helvetica, sans-serif;
         text-align: center;
     }
 </style>
